/* eslint-disable react/jsx-indent */
import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Timeline, Button, Modal, Table, message, Col } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import HdlRemark from '@/pages/components/HdlRemark';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';
import ServiceRemark from '../../components/ServiceRemark';
import UpdateModle from './UpdateModle';

const { Description } = DescriptionList;
@connect(({ adjust }) => ({
  adjust,
  disabledYmFlag: adjust.disabledYmFlag,
  execAdjId: adjust.execAdjId,
  adjdetData: adjust.adjdetData,
  injFlag: adjust.injFlag, // 是否有二级户
  injList: adjust.injList, // 二级户列表
  accoId: adjust.accoId, // 二级户账户ID
  injInsAccoId: adjust.injInsAccoId, // 默认选择的二级户ID
}))
class Detail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      maistrue: false,
      visHdlRemark: false,
      visUpdate: false,
      zodiacFlag: false,
    };
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { execAdjId, activeKey } = location.query;
    if (Number(activeKey) === 1 || Number(activeKey) === 2) {
      this.setState({
        zodiacFlag: true,
      });
    }
    dispatch({
      type: 'adjust/fetchAdjustDetail',
      payload: {
        execAdjId,
      },
    });
    dispatch({
      type: 'adjust/updateModelData',
      payload: {
        execAdjId,
      },
    });
  }

  // 缴纳明细弹框
  detailed = () => {
    this.setState({
      maistrue: true,
    });
    const {
      dispatch,
      adjust: { detail },
    } = this.props;
    const { empSendInfoVo } = detail;
    dispatch({
      type: 'adjust/getPayDetails',
      payload: {
        pageArg: { currentPage: 1, pageSizes: 10 },
        sendId: empSendInfoVo.sendId,
      },
    });
  };

  // 关闭缴纳明细弹框
  handleOk = () => {
    this.setState({
      maistrue: false,
    });
  };

  // 提交数据
  submitData = values => {
    const {
      dispatch,
      location,
      adjust: { detail },
    } = this.props;
    const { execAdjId } = location.query;
    dispatch({
      type: 'adjust/addHdlRemark',
      payload: { ...values, busiId: execAdjId, sendId: detail.sendId, taskId: detail.taskId },
      callback: response => {
        if (response) {
          message.success('办理备注成功！');
          this.handleModalVisible();
        } else {
          message.warning(`${response.message || '办理备注失败！'}`);
        }
      },
    });
  };

  handleModalVisible = flag => {
    this.setState({ visHdlRemark: !!flag });
  };

  addHdl = () => {
    this.handleModalVisible(true);

    const {
      dispatch,
      adjust: { detail },
    } = this.props;
    dispatch({
      type: 'adjust/getRemark',
      payload: { sendId: detail.sendId, busiId: detail.insEmpOrdId },
    });
  };

  visUpdateModle = flag => {
    this.setState({
      visUpdate: !!flag,
    });
  };

  showUpdateModle = () => {
    const { execAdjId, dispatch } = this.props;
    dispatch({
      type: 'adjust/queryEntryAdjDet',
      payload: {
        execAdjId,
      },
    }).then(() => {
      const { accoId } = this.props;
      if (accoId) {
        this.getInjList(accoId);
      }
    });
    this.setState({
      visUpdate: true,
    });
  };

  getInjList = insAccoId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'adjust/queryInjSecAccos',
      payload: { insAccoId },
    });
  };

  submitUpdateData = values => {
    const { dispatch } = this.props;
    dispatch({
      type: 'adjust/updateZodiacYM',
      payload: { ...values },
    });
    this.setState({
      visUpdate: false,
    });
  };

  render() {
    const { visHdlRemark, visUpdate, zodiacFlag, maistrue } = this.state;
    const {
      adjust: { detail, payDetailsData, remarkData = [] },
      adjdetData,
      injList,
      accoId,
      injInsAccoId,
      injFlag,
      disabledYmFlag,
    } = this.props;
    const { empBaseInfoVo, empSendInfoVo, adjDetList, insRemark = [] } = detail;
    const adjFlag = adjDetList && adjDetList.length;
    const insAccuColumns = [
      {
        title: '产品名称',
        dataIndex: 'ass',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        align: 'center',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '无'),
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '无'),
      },
      {
        title: '缴纳金额',
        dataIndex: 'payAmount',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业缴费比例(%)',
        dataIndex: 'entpProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业附加(元)',
        dataIndex: 'entpAddnAmo',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业缴费',
        dataIndex: 'entpPay',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人缴费比例(%)',
        dataIndex: 'perProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人附加(元)',
        dataIndex: 'perAddnAmo',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人缴费',
        dataIndex: 'perPay',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'cityId',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card
          title={
            <span style={{ fontWeight: 'bolder' }} id="sendInfor">
              派单信息
            </span>
          }
          bordered={false}
        >
          <DescriptionList>
            <Description term="签约方">{empSendInfoVo.ordSndrName || '--'}</Description>
            <Description term="客户名称">{empSendInfoVo.custName || '--'}</Description>
            <Description term="执行地">{empSendInfoVo.areaName || '--'}</Description>
            <Description term="派单时间">
              {empSendInfoVo.creTime
                ? moment(empSendInfoVo.creTime).format('YYYY-MM-DD HH:mm')
                : null}
            </Description>
            <Description term="所属客服">{empSendInfoVo.creName || '--'}</Description>
            <Description term="操作时间">
              {empSendInfoVo.operTime
                ? moment(empSendInfoVo.operTime).format('YYYY-MM-DD HH:mm')
                : '--'}
            </Description>
          </DescriptionList>
        </Card>
        <Card
          title={
            <span style={{ fontWeight: 'bolder' }} id="sendInfor">
              基本信息
            </span>
          }
          bordered={false}
        >
          <DescriptionList>
            <Description term="姓名">{empBaseInfoVo.empName || '--'}</Description>
            <Description term="证件类型">{empBaseInfoVo.idTypeName || '--'}</Description>
            <Description term="证件号">{empBaseInfoVo.idCode || '--'}</Description>
            <Description term="性别">{empBaseInfoVo.genderName || '--'}</Description>
            <Description term="国籍">{empBaseInfoVo.nationName || '--'}</Description>
            <Description term="出生日期">
              {empBaseInfoVo.birthDate
                ? moment(empBaseInfoVo.birthDate).format('YYYY-MM-DD')
                : null}
            </Description>
            <Description term="电话">{empBaseInfoVo.mobile || '--'}</Description>
            <Description term="员工邮箱">{empBaseInfoVo.email || '--'}</Description>
          </DescriptionList>
        </Card>

        <Card
          title={
            <span style={{ fontWeight: 'bolder' }} id="masterInfor">
              调整信息
            </span>
          }
          bordered={false}
          extra={zodiacFlag ? <a onClick={() => this.showUpdateModle()}>修改</a> : null}
        >
          {adjDetList.length ? (
            <Col
              style={{
                paddingTop: 14,
                marginTop: 14,
                height: 200,
                minHeight: 200,
                overflow: 'hidden',
                overflowY: 'scroll',
              }}
            >
              <Timeline>
                {adjFlag
                  ? adjDetList.map(item => (
                      <Timeline.Item key={item.content}>
                        <p>
                          <span style={{ marginRight: 18 }}>
                            {item.operTime
                              ? moment(item.operTime).format('YYYY-MM-DD HH:mm')
                              : '--'}
                          </span>
                          <span>{item.content}</span>
                        </p>
                      </Timeline.Item>
                    ))
                  : null}
              </Timeline>
            </Col>
          ) : (
            '暂无数据'
          )}
        </Card>

        <UpdateModle
          visUpdateModle={this.visUpdateModle}
          visUpdate={visUpdate}
          dataSource={adjdetData}
          submitUpdateData={this.submitUpdateData}
          getInjList={this.getInjList}
          injList={injList}
          accoId={accoId}
          injInsAccoId={injInsAccoId}
          injFlag={injFlag}
          disabledYmFlag={disabledYmFlag}
        />
        <HdlRemark hdlRemark={insRemark} />
        <ProRecording proRecording={detail.probDets} />
        <FooterToolbar style={{ width: '100%' }}>
          <Button style={{ marginLeft: 8 }} onClick={this.addHdl}>
            添加办理备注
          </Button>
          <Button onClick={() => router.goBack()}>返回</Button>
        </FooterToolbar>
        <Modal
          width="1500px"
          visible={maistrue}
          onCancel={this.handleOk}
          title="社保公积金明细"
          footer={[
            <Button key="close" type="primary" onClick={this.handleOk}>
              关闭
            </Button>,
          ]}
        >
          <Card>
            <Table
              dataSource={payDetailsData}
              columns={insAccuColumns}
              rowKey={record => record.serSetId}
              // loading={loading}
              pagination={false}
            />
          </Card>
        </Modal>
        <ServiceRemark
          visHdlRemark={visHdlRemark}
          handleModalVisible={this.handleModalVisible}
          submitData={this.submitData}
          detailHdl={remarkData}
        />
      </PageHeaderWrapper>
    );
  }
}
export default Detail;
